<template>
  <div class="app-container">
    <el-card class="box-card">
      <div style="margin-bottom: 10px;">
        <el-tag type="warning" style="cursor: pointer;" @click="dayPersonCountSearch(7)">近7天</el-tag>
        <el-tag type="warning" style="margin-left: 10px; cursor: pointer;" @click="dayPersonCountSearch(30)">近30天</el-tag>
        <!-- <el-tag type="warning" style="margin-left: 10px; cursor: pointer;">自定义</el-tag> -->
      </div>
      <div id="dayPersonCount" style="width: 650px; height: 320px;"></div>
    </el-card>
    
  </div>
</template>

<script>

import sampleApi from '@/api/aliyun/detection/sample'
import { formatDate } from '@/utils/formatTime'
export default {
	name: 'fmtChartIndex',
	data() {
		return {
			personCountChartData: {
        x: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
        addUserCountArr: [0, 0, 0, 0, 0, 0, 0],
        bindSampleCountArr: [0, 0, 0, 0, 0, 0, 0],
      },
		};
	},
  mounted () {
    this.dayPersonCountSearch(7)
  },
  methods: {
    dayPersonCountSearch (num) {
      sampleApi.sampleChart({num: num}).then(res => {
        let data = res.data;
        let x = [];
        let addUserCountArr = [];
        let bindSampleCountArr = [];
        data.forEach(v => {
          x.push(v.key.substring(5));
          addUserCountArr.push(v.addUserCount);
          bindSampleCountArr.push(v.bindSampleCount);
        })
        this.personCountChartData = {
          x: x,
          addUserCountArr: addUserCountArr,
          bindSampleCountArr: bindSampleCountArr
        };
        this.getPersonCount()
      })
    },
    getPersonCount () {
      let dayPersonCountChart = this.$echarts.init(document.getElementById('dayPersonCount'));
      let option = {
        title: {
          text: '肠菌样本在线统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['绑定样本用户量', '新注册用户量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.personCountChartData.x
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [{
            name: '绑定样本用户量',
            data: this.personCountChartData.bindSampleCountArr,
            type: 'line',
            smooth: true
          }, {
            name: '新注册用户量',
            data: this.personCountChartData.addUserCountArr,
            type: 'line',
            smooth: true
          }]
      };
      dayPersonCountChart.setOption(option);
    }
  },
  created() {
    
  }
};
</script>

<style scoped>
.box-card {
  width: 680px;
}

</style>